JavaScript rollovers are graphics that change appearance in a Web browser when you move the pointer over them or click them. They take many forms, from buttons to swapped images to images that toggle.
Whether you build JavaScript rollovers by using the Fireworks Button Editor, by using slices, or by writing JavaScript code yourself, rollovers all work the same way. Rollovers replace one graphic with another graphic in response to a pointer passing over it or clicking it.
The following steps outline the general technique to help you understand how to create a rollover. To create regular rollover buttons, use the Button Editor. For more information, see Creating buttons.
Generally, to build a rollover in Fireworks:
| 1 | Create frames for the rollover. Each graphic for a rollover state is drawn on a separate frame. For example, a button has two to four frames. |
| 2 | Create or import a graphic on each frame. |
| 3 | Create slices to define the area that changes appearance when the rollover is triggered. All the states of a button share the same slice. |
| 4 | If the area that triggers the rollover is not the same area that changes appearance, draw a hotspot object to act as the trigger for the rollover. |
| 5 | Define the behaviors for the rollover. |
| Behaviors determine what happens in response to the mouse event. For example, a behavior might instruct the Web browser to replace the image on Frame 5 with an image on Frame 6 when the mouse passes over a swap-image rollover. | |
| 6 | Establish links, designate targets, and set up the naming convention for the graphic slices. |
| For more information about establishing links, see Chapter 13, "Creating Hotspots and Image Maps." | |
| 7 | Optimize the graphics. |
| For more about Optimization, see Chapter 11, "Optimizing Graphics." | |
| 8 | Export the slices to create the graphic files and generate the HTML, which includes the JavaScript code that controls the rollovers in a browser. |
| For more about exporting slices, see Chapter 12, "Exporting." | |
| 9 | Place the rollover HTML in your Web page's HTML. |
|